import React  , {useState}  from 'react'
import { Steps, Divider , Form, Input, Button, Select } from 'antd';

import './newlyAdded.scss'

export default function NewlyAdded() {
    const { Step } = Steps;
    const[current ,useStateAdd] = useState(0)
    const StepOnchange =  (current) => {
        useStateAdd (current)
    }
    // 布局
    const { Option } = Select;
            const layout = {
                labelCol: {
                    span: 8,
                },
                wrapperCol: {
                    span: 16,
                },
                };
    const tailLayout = {
        wrapperCol: {
            offset: 8,
            span: 16,
        },
    };
    
   const [form] = Form.useForm();
    // 输入框值
    const onchangeyy = (current) => {
    //    return current =  current + 1
    }
    // 资金方值
   const onGenderChange = (value) => {

        switch (value) {
            case '大麦金融':
                return console.log(value);
                

            case '鸿泰金融':
                return console.log(value);

            case '大象金融':
                return console.log(value);

            default: 
                return console.log(Error);
            }
   }
    // from 值
    const onFinish = (values) => {
        console.log("表头", values);
    };
    // 清空内容
   const onReset = () => {
     form.resetFields();
   };
 
    return (
        <div className='product'>
            <Steps current={current} onChange={StepOnchange} responsive  labelPlacement = 'vertical'>
                <Step description="填写基本信息" />
                <Step description="填写产品费率" />
                <Step description="配置申请资料" />
                <Step description="填写其他信息" />
            </Steps>
            {/* 分割器 */}
            <Divider />
            <div className='addbox'>
                <Steps current={current} onChange={StepOnchange} direction="vertical">
                    <Step description="填写基本信息" className='aad' />
                    <Step description="填写产品费率" className='aad'/>
                    <Step description="配置申请资料" className='aad'/>
                    <Step description="填写其他信息" className='aad'/>
                </Steps>
            </div>
   

    <Form {...layout} form={form} name="control-hooks" scrollToFirstError = 'true' onFinish={onFinish}>
        {/* 输入框 */}
        <Form.Item name="note" label="产品名称" rules={[{required: true,}]} >
            <Input onChange={onchangeyy}/>
        </Form.Item>
        {/* 下拉选择框 */}
        <Form.Item name="gender" label="资金方" rules={[{required: true,}]}>
            <Select placeholder="不能为空" onChange={onGenderChange} allowClear>
                <Option value="大麦金融">大麦金融</Option>
                <Option value="鸿泰金融">鸿泰金融</Option>
                <Option value="大象金融">大象金融</Option>
            </Select>
        </Form.Item>
        {/* 提交 清空 按钮 */}
        <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
            提交
            </Button>
            <Button htmlType="button" onClick={onReset}>
            清空
            </Button>
        </Form.Item>
    </Form>

    </div>

    
    )
}
